<template>
    <div ref="chartRef" class="echartsClass"></div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount, watch } from "vue";
import * as echarts from "echarts";
import { useCompanyDataStore } from '@/store/companys'
import { size } from "lodash";

const companyDataStore = useCompanyDataStore()

interface ChartData {
    name: string;
    data: number[];
}

const props = defineProps<{
    day: string[]
    data: ChartData[]
}>()

const chartRef = ref<HTMLElement>()
let chartInstance: echarts.ECharts | null = null

const initChart = () => {
    if (!chartRef.value) return;
    chartInstance?.dispose();
    chartInstance = echarts.init(chartRef.value);
    updateChart();
    window.addEventListener('resize', handleChartResize);
};

const updateChart = () => {
    if (!chartInstance) return;

    const newArr =  props.data[0].data.concat( props.data[1].data )
    let maxValue = Math.max(...newArr);
    const remainder = maxValue % 5;
    if (remainder !== 0) {
        maxValue = maxValue + (5 - remainder);
    }

    let interval = 0;
    if(maxValue <= 5){
        interval = 1;
    }else {
        interval = Math.ceil(maxValue / 5);
    }

    const option = {
        grid: {
            top: 30,
            right: 0,
            bottom: 0,
            left: 0,
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['文本工单', '咨询次数'],
            right: 0,
            top: 0
        },
        xAxis: {
            type: 'category',
            data: props.day,
            axisLine: {
                lineStyle: {
                    color: '#999'
                }
            }
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: maxValue,
            scale: false,
            interval: interval,
            axisLabel: {
                formatter: '{value}',
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#999'
                }
            }
        },
        series: [
            {
                name: '文本工单',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 8,
                lineStyle: {
                    width: 3,
                    color: '#36a2eb'
                },
                itemStyle: {
                    color: '#36a2eb'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(54, 162, 235, 0.5)' },
                        { offset: 1, color: 'rgba(54, 162, 235, 0.1)' }
                    ])
                },
                data: props.data[0].data
            },
            {
                name: '咨询次数',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 8,
                lineStyle: {
                    width: 3,
                    color: '#ff6384'
                },
                itemStyle: {
                    color: '#ff6384'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(255, 99, 132, 0.5)' },
                        { offset: 1, color: 'rgba(255, 99, 132, 0.1)' }
                    ])
                },
                data: props.data[1].data
            }
        ]
    };

    chartInstance.setOption(option);
};

const handleChartResize = () => {
    chartInstance?.resize();
};

const cleanupChart = () => {
    window.removeEventListener('resize', handleChartResize);
    chartInstance?.dispose();
};

onBeforeUnmount(() => {
    cleanupChart();
});

onMounted(() => {
    initChart()
})

watch(
    () => companyDataStore.currentComanyInfo,
    (newCompany) => {
        if (newCompany) {
            setTimeout(() => {
                initChart()
            }, 500)
        }
    },
    { deep: true }
)
</script>
<style scoped>
.echartsClass {
    width: 100%;
    height: 220px;
}
</style>